<template>
	<z-nav-bar :title="title">
		<template v-slot:right>
			<view v-if="questionData.id" class="uni-red" @click="delQuestionData">删除</view>
		</template>
	</z-nav-bar>
	
	<view class="uni-mx-32 uni-pb-32">
		<view class="z-font-32 text-w uni-mt-32">添加视频或图片</view>
		<z-preview-media :srcStr="questionData.material" @change="materialChange" addButton delIcon></z-preview-media>
	</view>
	<view>
		<view class="item-title flex_sbc">
			<view>添加训练环境</view>
			<image
				v-if="questionData.environmentList && questionData.environmentList.length"
				:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
				class="icon-size-32"
				@click="selTag('environment')"
			></image>
		</view>
		<z-add-button v-if="!questionData.environmentList || !questionData.environmentList.length" text="添加环境" class="uni-mx-32 uni-mb-32" @click="selTag('environment')"></z-add-button>
		<view v-if="questionData.environmentName" class="flex_fsc flex_wrap uni-mx-32">
			<view v-for="(tag, index) in questionData.environmentName.split(',')" :key="index" class="tag">
				{{ tag }}
			</view>
		</view>
		<view class="line-spacing"></view>
	</view>
	<view class="line-spacing line-spacing-height"></view>
	<view>
		<view>
			<view class="item-title flex_sbc">
				<view>
					<text class="uni-red">*</text>
					添加问题描述
				</view>
				<image
					v-if="questionData.descriptionTag && questionData.descriptionTagList"
					:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
					class="icon-size-32"
					@click="selTag('descriptionTag')"
				></image>
			</view>
			<z-add-button v-if="!questionData.descriptionTag || !questionData.descriptionTagList" text="添加标签" class="uni-mx-32 uni-mb-32" @click="selTag('descriptionTag')"></z-add-button>
			<view v-if="questionData.descriptionTagName" class="flex_fsc flex_wrap uni-mx-32">
				<view v-for="(tag, index) in questionData.descriptionTagName.split(',')" :key="index" class="tag">
					{{ tag }}
				</view>
			</view>
			<view class="line-spacing"></view>
		</view>
		<view class="flex_fsc uni-mx-32 uni-my-20">
			<view>
				<text class="uni-red">*</text>
				问题名称
			</view>
			<input
				v-model="questionData.name"
				type="text"
				class="input-box"
				placeholder="简要描述问题名称"
				placeholder-class="uni-placeholder"
			/>
		</view>
		<view class="line-spacing"></view>
		<view class="uni-mx-32">
			<view class="z-font-32 text-w uni-mt-32">问题描述</view>
			<textarea
				v-model="questionData.description"
				class="text"
				placeholder="请输入内容(多行)"
				placeholder-class="uni-placeholder"
			></textarea>
		</view>
		<view class="line-spacing"></view>
		<view class="uni-mx-32 uni-pb-40">
			<view class="add-course-plan flex_cc" @click="associatedSolution">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-add-main.png'" class="icon-size"></image>
				<view>添加解决方案</view>
			</view>
			<view v-for="(scheme, sindex) in questionData.schemeList" :key="scheme.id" class="flex_sbc uni-mt-32">
				<view>{{ scheme.name }}</view>
				<image
					:src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'"
					class="icon-size-32"
					@click="questionData.schemeList.splice(sindex, 1)"
				></image>
			</view>
		</view>
		<view class="line-spacing"></view>
		<view class="uni-mx-32 uni-pb-40">
			<view class="add-course-plan flex_cc" @click="relatedCourses">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-add-main.png'" class="icon-size"></image>
				<view>添加到{{ questionType ? '学员' : '' }}课程</view>
			</view>
			<view v-for="(course, cindex) in questionData.courseList" :key="course.id" class="flex_sbc uni-mt-32">
				<view>{{ course.name }}</view>
				<image
					:src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'"
					class="icon-size-32"
					@click="questionData.courseList.splice(cindex, 1)"
				></image>
			</view>
		</view>
		<view class="line-spacing line-spacing-height"></view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
</template>

<script setup>
import { getQuestionDetial, getPlayerQuestionDetail, addQuestion, editQuestion, delQuestion } from '@/api/question.js';
import { addPlayerQuestion, editPlayerQuestion } from '@/api/player.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance(),
	playerInfo = uni.getStorageSync('player-info');
let questionType = ref(0), title = ref(''),
	eventChannel = that.getOpenerEventChannel(),
	source = 0,
	selStudent = ref(0),
	selStudentObj = ref({});


const questionData = reactive({
	name: '',
	description: '',
	descriptionTag: '',
	descriptionTagList: [],
	environment: '',
	environmentList: [],
	relCourse: '',
	courseList: [],
	relScheme: '',
	schemeList: [],
	material: '',
	
});
onLoad((opt) => {
	questionType.value = parseInt(opt.type || 0);
	source = parseInt(opt.source || 0);
	selStudent.value = parseInt(opt.selStudent || 0);
	Object.assign(questionData, uni.getStorageSync('edit-question') || {});
	if (questionData.id) {
		const funName = questionType.value ? getPlayerQuestionDetail : getQuestionDetial;
		funName(questionData.id).then((res) => {
			if (questionType.value) res.courseList = res.courseStudentList
			Object.assign(questionData, res);
		});
	}
	title.value = questionData.id ? '编辑问题' : '新增问题';
});

const buts = [
	{
		label: '确定完成',
		bgColor: 'uni-color-main-bg'
	}
];

function submit() {
	const { id, name, descriptionTag, environment, description, courseList, schemeList, material } = questionData
	if (!name) return that.tools.alert('请输入问题名称');
	if (!descriptionTag) return that.tools.alert('请选择问题描述');
	const postData = {
		name,
		descriptionTag,
		environment,
		description,
		relCourse: courseList ? courseList.map((item) => item.id).join(',') : '',
		relScheme: schemeList ? schemeList.map((item) => item.id).join(',') : '',
		material: material
	};
	if (!selStudent.value && questionType.value) postData.stuId = playerInfo.id;
	const funName = id ? (questionType.value ? editPlayerQuestion : editQuestion) : (questionType.value ? addPlayerQuestion : addQuestion);
	funName(postData, id).then((res) => {
		uni.setStorageSync('edit-question', questionData);
		that.tools.alert(id ? '编辑完成' : '添加成功');
		eventChannel.emit('editDone');
		if (source)
			uni.redirectTo({
				url: '/pages/question/index'
			});
		else uni.navigateBack();
	});
}

function selTag(type) {
	uni.setStorageSync('tagSelList', questionData[type + 'List'])
	uni.navigateTo({
		url: type == 'descriptionTag' ? '/pages/question/select-tag/select-tag' : '/pages/question/add-item/add-item?type=2',
		events: {
			getTag: data => {
				const tagName = data.obj
					.map((item) => item.map((el) => el.dictValue).join('-->'))
					.join(',');
				if (type == 'descriptionTag') {
					if (!questionData.name) questionData.name = `${data.obj[0][0].dictValue}-->${data.obj[0][1].dictValue}`
					if (!questionData.description) questionData.description = tagName
				} 
				questionData[type] = data.code;
				questionData[type + 'List'] = data.obj;
				questionData[type + 'Name'] = tagName
			}
		}
	});
}

// 选择视频或图片
function materialChange(e) {
	questionData.material = e;
}
// 关联方案
function associatedSolution() {
	uni.setStorageSync('select-scheme', questionData.schemeList);
	uni.setStorageSync('questionCopy', questionData)
	uni.navigateTo({
		url: '/pages/scheme/course-select/course-select',
		events: {
			relScheme: (data) => {
				questionData.schemeList = data;
			}
		}
	});
}

// 关联课程
function relatedCourses() {
	uni.setStorageSync('select-course', questionData.courseList);
	uni.setStorageSync('questionCopy', questionData);
	uni.navigateTo({
		url: '/pages/course/select/selects-single' + (questionType.value ? '?type=1&multiple=1' : ''),
		events: {
			relCourse: (data) => {
				questionData.courseList = data;
			}
		}
	});
}

function delQuestionData() {
	uni.showModal({
		title: '删除提示',
		content: '确定要删除该问题吗？',
		success: (res) => {
			if (res.confirm) {
				delQuestion(questionData.id).then((res) => {
					uni.navigateBack();
					that.tools.alert('删除成功');
					eventChannel.emit('deleteDone');
				});
			}
		}
	});
}
</script>

<style lang="scss" scoped>
@import 'edit.scss';
</style>
